import React from 'react';
import { Card, Button, Typography, Alert } from 'antd';
import { UserAddOutlined } from '@ant-design/icons';

const { Title, Text } = Typography;

const NonMemberPrompt = ({ network, operationLoading, onJoinNetwork }) => {
  return (
    <Card className="non-member-prompt">
      <div className="non-member-icon">
        <UserAddOutlined />
      </div>
      <Title level={4} className="non-member-title">
        您还不是此网络的成员
      </Title>
      <Text className="non-member-description">
        加入网络后即可查看成员列表和参与网络活动
      </Text>
      <br />
      {network.status === 'active' ? (
        <Button 
          type="primary" 
          size="large"
          icon={<UserAddOutlined />}
          onClick={onJoinNetwork}
          loading={operationLoading}
          className="join-network-btn"
        >
          立即加入
        </Button>
      ) : (
        <Alert
          message="网络暂不可用"
          description="此网络当前处于非活跃状态，暂时无法加入"
          type="warning"
          className="network-unavailable-alert"
          showIcon
        />
      )}
    </Card>
  );
};

export default NonMemberPrompt;